<!DOCTYPE html>
<html lang="zh_cn">
<head>
    <meta charset="UTF-8">
    <title>百度AI-皮肤分析-canvas标注</title>
    <style>
        #mycanvas {
            box-shadow: 0 0 10px #333;
        }
    </style>
</head>
<body>
<!--这里是写的图片的宽高、请根据自己的情况来-->
<canvas id="mycanvas" width="301" height="299"></canvas>
<script>
    //皮肤分析返回的数据
    var data = "{\"error_code\":0,\"error_msg\":\"SUCCESS\",\"log_id\":255535350561234565,\"timestamp\":1627548054,\"cached\":0,\"result\":{\"face_num\":1,\"face_list\":[{\"face_token\":\"14af99400cf7749027e88681276dcb9d\",\"location\":{\"left\":74.23,\"top\":74.95,\"width\":175,\"height\":169,\"degree\":8,\"prob\":1,\"conf\":1},\"skin\":{\"color\":4,\"smooth\":3},\"acnespotmole\":{\"acne_num\":6,\"acne_list\":[{\"type\":3,\"score\":0.88,\"left\":190.48,\"top\":122.19,\"right\":193.82,\"bottom\":125.51,\"center_x\":192,\"center_y\":123,\"radius\":1},{\"type\":3,\"score\":0.68,\"left\":181.39,\"top\":240.07,\"right\":184.7,\"bottom\":243.36,\"center_x\":183,\"center_y\":241,\"radius\":1},{\"type\":3,\"score\":0.3,\"left\":204.58,\"top\":96.9,\"right\":207.71,\"bottom\":100.09,\"center_x\":206,\"center_y\":98,\"radius\":1},{\"type\":0,\"score\":0.25,\"left\":140.96,\"top\":217.54,\"right\":143.16,\"bottom\":220.93,\"center_x\":142,\"center_y\":219,\"radius\":1},{\"type\":3,\"score\":0.18,\"left\":108.88,\"top\":225.88,\"right\":112.47,\"bottom\":229.21,\"center_x\":110,\"center_y\":227,\"radius\":1},{\"type\":3,\"score\":0.18,\"left\":204.39,\"top\":90.92,\"right\":209.03,\"bottom\":97.29,\"center_x\":206,\"center_y\":94,\"radius\":2}],\"speckle_num\":3,\"speckle_list\":[{\"type\":1,\"score\":0.24,\"left\":168.27,\"top\":151.17,\"right\":170.52,\"bottom\":154.42,\"position\":[{\"x\":168,\"y\":152},{\"x\":168,\"y\":153},{\"x\":169,\"y\":153},{\"x\":169,\"y\":152}]},{\"type\":2,\"score\":0.14,\"left\":111.95,\"top\":177.09,\"right\":117.49,\"bottom\":182.22,\"position\":[{\"x\":112,\"y\":178},{\"x\":111,\"y\":179},{\"x\":111,\"y\":181},{\"x\":115,\"y\":181},{\"x\":115,\"y\":179},{\"x\":113,\"y\":179}]},{\"type\":2,\"score\":0.1,\"left\":102.78,\"top\":95.9,\"right\":108.26,\"bottom\":101.48,\"position\":[{\"x\":103,\"y\":95},{\"x\":104,\"y\":96},{\"x\":104,\"y\":97},{\"x\":103,\"y\":98},{\"x\":103,\"y\":99},{\"x\":106,\"y\":99},{\"x\":105,\"y\":98},{\"x\":105,\"y\":97}]}],\"mole_num\":0,\"mole_list\":[]},\"wrinkle\":{\"wrinkle_num\":0,\"wrinkle_types\":[],\"wrinkle_data\":[]},\"eyesattr\":{\"dark_circle_left\":[[{\"x\":213,\"y\":137},{\"x\":212,\"y\":138},{\"x\":212,\"y\":143},{\"x\":213,\"y\":144},{\"x\":214,\"y\":144},{\"x\":215,\"y\":145},{\"x\":215,\"y\":146},{\"x\":217,\"y\":148},{\"x\":218,\"y\":148},{\"x\":219,\"y\":149},{\"x\":226,\"y\":149},{\"x\":227,\"y\":148},{\"x\":230,\"y\":148},{\"x\":231,\"y\":147},{\"x\":232,\"y\":147},{\"x\":233,\"y\":146},{\"x\":233,\"y\":145},{\"x\":234,\"y\":144},{\"x\":235,\"y\":144},{\"x\":235,\"y\":139},{\"x\":223,\"y\":139},{\"x\":222,\"y\":138},{\"x\":220,\"y\":138},{\"x\":219,\"y\":137}]],\"dark_circle_right\":[[{\"x\":129,\"y\":124},{\"x\":128,\"y\":125},{\"x\":128,\"y\":129},{\"x\":129,\"y\":130},{\"x\":129,\"y\":132},{\"x\":130,\"y\":132},{\"x\":133,\"y\":135},{\"x\":133,\"y\":136},{\"x\":135,\"y\":138},{\"x\":136,\"y\":138},{\"x\":137,\"y\":139},{\"x\":138,\"y\":139},{\"x\":140,\"y\":141},{\"x\":142,\"y\":141},{\"x\":143,\"y\":142},{\"x\":145,\"y\":142},{\"x\":146,\"y\":143},{\"x\":151,\"y\":143},{\"x\":152,\"y\":142},{\"x\":154,\"y\":142},{\"x\":155,\"y\":141},{\"x\":156,\"y\":141},{\"x\":157,\"y\":140},{\"x\":158,\"y\":140},{\"x\":159,\"y\":139},{\"x\":160,\"y\":139},{\"x\":161,\"y\":138},{\"x\":162,\"y\":138},{\"x\":164,\"y\":136},{\"x\":165,\"y\":136},{\"x\":166,\"y\":135},{\"x\":166,\"y\":134},{\"x\":167,\"y\":133},{\"x\":167,\"y\":131},{\"x\":166,\"y\":130},{\"x\":166,\"y\":129},{\"x\":146,\"y\":129},{\"x\":145,\"y\":128},{\"x\":143,\"y\":128},{\"x\":142,\"y\":127},{\"x\":139,\"y\":127},{\"x\":138,\"y\":126},{\"x\":137,\"y\":126},{\"x\":136,\"y\":125},{\"x\":134,\"y\":125},{\"x\":133,\"y\":124}]],\"dark_circle_left_type\":[1],\"dark_circle_right_type\":[1],\"eye_bags_left\":[],\"eye_bags_right\":[[{\"x\":139,\"y\":135},{\"x\":138,\"y\":136},{\"x\":137,\"y\":136},{\"x\":137,\"y\":139},{\"x\":138,\"y\":139},{\"x\":139,\"y\":140},{\"x\":139,\"y\":141},{\"x\":142,\"y\":141},{\"x\":144,\"y\":143},{\"x\":152,\"y\":143},{\"x\":153,\"y\":142},{\"x\":154,\"y\":142},{\"x\":155,\"y\":141},{\"x\":156,\"y\":141},{\"x\":158,\"y\":139},{\"x\":158,\"y\":137},{\"x\":157,\"y\":136},{\"x\":144,\"y\":136},{\"x\":143,\"y\":135}]],\"eye_bags_left_type\":[],\"eye_bags_right_type\":[1]},\"blackheadpore\":{\"poly\":[{\"class_id\":1,\"score\":0.53,\"left\":208,\"right\":236,\"top\":157,\"bottom\":188,\"point\":[{\"x\":211,\"y\":158},{\"x\":211,\"y\":158},{\"x\":211,\"y\":159},{\"x\":211,\"y\":159},{\"x\":211,\"y\":159},{\"x\":211,\"y\":159},{\"x\":210,\"y\":160},{\"x\":210,\"y\":160},{\"x\":210,\"y\":161},{\"x\":210,\"y\":161},{\"x\":210,\"y\":161},{\"x\":210,\"y\":161},{\"x\":210,\"y\":162},{\"x\":210,\"y\":162},{\"x\":210,\"y\":162},{\"x\":210,\"y\":162},{\"x\":209,\"y\":163},{\"x\":209,\"y\":163},{\"x\":210,\"y\":163},{\"x\":210,\"y\":163},{\"x\":210,\"y\":164},{\"x\":210,\"y\":164},{\"x\":210,\"y\":164},{\"x\":210,\"y\":164},{\"x\":210,\"y\":165},{\"x\":210,\"y\":165},{\"x\":210,\"y\":165},{\"x\":210,\"y\":165},{\"x\":210,\"y\":166},{\"x\":210,\"y\":166},{\"x\":210,\"y\":166},{\"x\":210,\"y\":166},{\"x\":210,\"y\":167},{\"x\":210,\"y\":167},{\"x\":210,\"y\":167},{\"x\":210,\"y\":167},{\"x\":211,\"y\":168},{\"x\":211,\"y\":168},{\"x\":211,\"y\":168},{\"x\":211,\"y\":168},{\"x\":212,\"y\":169},{\"x\":212,\"y\":169},{\"x\":212,\"y\":169},{\"x\":212,\"y\":169},{\"x\":212,\"y\":170},{\"x\":212,\"y\":170},{\"x\":212,\"y\":170},{\"x\":212,\"y\":170},{\"x\":212,\"y\":171},{\"x\":212,\"y\":171},{\"x\":213,\"y\":171},{\"x\":213,\"y\":171},{\"x\":213,\"y\":172},{\"x\":213,\"y\":172},{\"x\":213,\"y\":172},{\"x\":213,\"y\":172},{\"x\":213,\"y\":173},{\"x\":213,\"y\":173},{\"x\":213,\"y\":173},{\"x\":213,\"y\":173},{\"x\":213,\"y\":174},{\"x\":213,\"y\":174},{\"x\":213,\"y\":174},{\"x\":213,\"y\":174},{\"x\":213,\"y\":175},{\"x\":213,\"y\":175},{\"x\":213,\"y\":176},{\"x\":213,\"y\":176},{\"x\":213,\"y\":176},{\"x\":213,\"y\":176},{\"x\":213,\"y\":177},{\"x\":213,\"y\":177},{\"x\":213,\"y\":177},{\"x\":213,\"y\":177},{\"x\":213,\"y\":178},{\"x\":213,\"y\":178},{\"x\":213,\"y\":178},{\"x\":213,\"y\":178},{\"x\":213,\"y\":178},{\"x\":213,\"y\":178},{\"x\":214,\"y\":179},{\"x\":214,\"y\":179},{\"x\":213,\"y\":179},{\"x\":213,\"y\":179},{\"x\":213,\"y\":180},{\"x\":213,\"y\":180},{\"x\":213,\"y\":180},{\"x\":213,\"y\":180},{\"x\":213,\"y\":181},{\"x\":213,\"y\":181},{\"x\":214,\"y\":181},{\"x\":214,\"y\":181},{\"x\":214,\"y\":182},{\"x\":214,\"y\":182},{\"x\":214,\"y\":182},{\"x\":214,\"y\":182},{\"x\":214,\"y\":182},{\"x\":214,\"y\":182},{\"x\":215,\"y\":183},{\"x\":215,\"y\":183},{\"x\":215,\"y\":183},{\"x\":215,\"y\":183},{\"x\":215,\"y\":184},{\"x\":215,\"y\":184},{\"x\":216,\"y\":184},{\"x\":216,\"y\":184},{\"x\":216,\"y\":185},{\"x\":216,\"y\":185},{\"x\":216,\"y\":185},{\"x\":216,\"y\":185},{\"x\":217,\"y\":185},{\"x\":217,\"y\":185},{\"x\":217,\"y\":185},{\"x\":217,\"y\":185},{\"x\":218,\"y\":186},{\"x\":218,\"y\":186},{\"x\":218,\"y\":186},{\"x\":218,\"y\":186},{\"x\":219,\"y\":186},{\"x\":219,\"y\":186},{\"x\":219,\"y\":186},{\"x\":219,\"y\":186},{\"x\":220,\"y\":186},{\"x\":220,\"y\":186},{\"x\":220,\"y\":186},{\"x\":220,\"y\":186},{\"x\":221,\"y\":186},{\"x\":221,\"y\":186},{\"x\":221,\"y\":186},{\"x\":221,\"y\":186},{\"x\":222,\"y\":186},{\"x\":222,\"y\":186},{\"x\":222,\"y\":186},{\"x\":222,\"y\":186},{\"x\":223,\"y\":186},{\"x\":223,\"y\":186},{\"x\":223,\"y\":186},{\"x\":223,\"y\":186},{\"x\":224,\"y\":186},{\"x\":224,\"y\":186},{\"x\":224,\"y\":186},{\"x\":224,\"y\":186},{\"x\":225,\"y\":186},{\"x\":225,\"y\":186},{\"x\":225,\"y\":186},{\"x\":225,\"y\":186},{\"x\":226,\"y\":186},{\"x\":226,\"y\":186},{\"x\":226,\"y\":186},{\"x\":226,\"y\":186},{\"x\":227,\"y\":185},{\"x\":227,\"y\":185},{\"x\":227,\"y\":185},{\"x\":227,\"y\":185},{\"x\":228,\"y\":185},{\"x\":228,\"y\":185},{\"x\":228,\"y\":184},{\"x\":228,\"y\":184},{\"x\":228,\"y\":184},{\"x\":228,\"y\":184},{\"x\":229,\"y\":183},{\"x\":229,\"y\":183},{\"x\":229,\"y\":183},{\"x\":229,\"y\":183},{\"x\":230,\"y\":182},{\"x\":230,\"y\":182},{\"x\":230,\"y\":182},{\"x\":230,\"y\":182},{\"x\":231,\"y\":181},{\"x\":231,\"y\":181},{\"x\":231,\"y\":181},{\"x\":231,\"y\":181},{\"x\":232,\"y\":181},{\"x\":232,\"y\":181},{\"x\":232,\"y\":180},{\"x\":232,\"y\":180},{\"x\":232,\"y\":180},{\"x\":232,\"y\":180},{\"x\":233,\"y\":179},{\"x\":233,\"y\":179},{\"x\":233,\"y\":179},{\"x\":233,\"y\":179},{\"x\":233,\"y\":178},{\"x\":233,\"y\":178},{\"x\":233,\"y\":178},{\"x\":233,\"y\":178},{\"x\":234,\"y\":177},{\"x\":234,\"y\":177},{\"x\":234,\"y\":177},{\"x\":234,\"y\":177},{\"x\":234,\"y\":176},{\"x\":234,\"y\":176},{\"x\":234,\"y\":176},{\"x\":234,\"y\":176},{\"x\":234,\"y\":175},{\"x\":234,\"y\":175},{\"x\":234,\"y\":174},{\"x\":234,\"y\":174},{\"x\":235,\"y\":174},{\"x\":235,\"y\":174},{\"x\":235,\"y\":173},{\"x\":235,\"y\":173},{\"x\":235,\"y\":173},{\"x\":235,\"y\":173},{\"x\":235,\"y\":172},{\"x\":235,\"y\":172},{\"x\":235,\"y\":172},{\"x\":235,\"y\":172},{\"x\":234,\"y\":171},{\"x\":234,\"y\":171},{\"x\":234,\"y\":171},{\"x\":234,\"y\":171},{\"x\":234,\"y\":170},{\"x\":234,\"y\":170},{\"x\":234,\"y\":170},{\"x\":234,\"y\":170},{\"x\":234,\"y\":169},{\"x\":234,\"y\":169},{\"x\":234,\"y\":169},{\"x\":234,\"y\":169},{\"x\":234,\"y\":168},{\"x\":234,\"y\":168},{\"x\":234,\"y\":168},{\"x\":234,\"y\":168},{\"x\":234,\"y\":167},{\"x\":234,\"y\":167},{\"x\":234,\"y\":167},{\"x\":234,\"y\":167},{\"x\":233,\"y\":166},{\"x\":233,\"y\":166},{\"x\":233,\"y\":166},{\"x\":233,\"y\":166},{\"x\":233,\"y\":165},{\"x\":233,\"y\":165},{\"x\":233,\"y\":165},{\"x\":233,\"y\":165},{\"x\":233,\"y\":164},{\"x\":233,\"y\":164},{\"x\":232,\"y\":164},{\"x\":232,\"y\":164},{\"x\":232,\"y\":164},{\"x\":232,\"y\":164},{\"x\":231,\"y\":163},{\"x\":231,\"y\":163},{\"x\":231,\"y\":163},{\"x\":231,\"y\":163},{\"x\":231,\"y\":162},{\"x\":231,\"y\":162},{\"x\":230,\"y\":162},{\"x\":230,\"y\":162},{\"x\":230,\"y\":161},{\"x\":230,\"y\":161},{\"x\":229,\"y\":161},{\"x\":229,\"y\":161},{\"x\":229,\"y\":160},{\"x\":229,\"y\":160},{\"x\":228,\"y\":160},{\"x\":228,\"y\":160},{\"x\":228,\"y\":159},{\"x\":228,\"y\":159},{\"x\":227,\"y\":159},{\"x\":227,\"y\":159},{\"x\":227,\"y\":159},{\"x\":227,\"y\":159},{\"x\":226,\"y\":159},{\"x\":226,\"y\":159},{\"x\":226,\"y\":159},{\"x\":226,\"y\":159},{\"x\":225,\"y\":159},{\"x\":225,\"y\":159},{\"x\":225,\"y\":159},{\"x\":225,\"y\":159},{\"x\":224,\"y\":159},{\"x\":224,\"y\":159},{\"x\":224,\"y\":159},{\"x\":224,\"y\":159},{\"x\":223,\"y\":159},{\"x\":223,\"y\":159},{\"x\":223,\"y\":159},{\"x\":223,\"y\":159},{\"x\":222,\"y\":159},{\"x\":222,\"y\":159},{\"x\":222,\"y\":159},{\"x\":222,\"y\":159},{\"x\":221,\"y\":159},{\"x\":221,\"y\":159},{\"x\":221,\"y\":159},{\"x\":221,\"y\":159},{\"x\":220,\"y\":159},{\"x\":220,\"y\":159},{\"x\":220,\"y\":159},{\"x\":220,\"y\":159},{\"x\":219,\"y\":159},{\"x\":219,\"y\":159},{\"x\":219,\"y\":159},{\"x\":219,\"y\":159},{\"x\":218,\"y\":159},{\"x\":218,\"y\":159},{\"x\":218,\"y\":159},{\"x\":218,\"y\":159},{\"x\":217,\"y\":159},{\"x\":217,\"y\":159},{\"x\":217,\"y\":159},{\"x\":217,\"y\":159},{\"x\":216,\"y\":159},{\"x\":216,\"y\":159},{\"x\":216,\"y\":159},{\"x\":216,\"y\":159},{\"x\":215,\"y\":159},{\"x\":215,\"y\":159},{\"x\":215,\"y\":159},{\"x\":215,\"y\":159},{\"x\":214,\"y\":159},{\"x\":214,\"y\":159},{\"x\":214,\"y\":159},{\"x\":214,\"y\":159},{\"x\":213,\"y\":158},{\"x\":213,\"y\":158},{\"x\":213,\"y\":158},{\"x\":213,\"y\":158},{\"x\":212,\"y\":159},{\"x\":212,\"y\":159},{\"x\":212,\"y\":159},{\"x\":212,\"y\":159},{\"x\":211,\"y\":158},{\"x\":211,\"y\":158}]},{\"class_id\":1,\"score\":0.52,\"left\":130,\"right\":162,\"top\":150,\"bottom\":181,\"point\":[{\"x\":144,\"y\":151},{\"x\":144,\"y\":151},{\"x\":144,\"y\":151},{\"x\":144,\"y\":151},{\"x\":143,\"y\":151},{\"x\":143,\"y\":151},{\"x\":143,\"y\":152},{\"x\":143,\"y\":152},{\"x\":142,\"y\":152},{\"x\":142,\"y\":152},{\"x\":142,\"y\":152},{\"x\":142,\"y\":152},{\"x\":141,\"y\":152},{\"x\":141,\"y\":152},{\"x\":141,\"y\":152},{\"x\":141,\"y\":152},{\"x\":140,\"y\":152},{\"x\":140,\"y\":152},{\"x\":140,\"y\":152},{\"x\":140,\"y\":152},{\"x\":139,\"y\":152},{\"x\":139,\"y\":152},{\"x\":139,\"y\":152},{\"x\":139,\"y\":152},{\"x\":138,\"y\":152},{\"x\":138,\"y\":152},{\"x\":138,\"y\":153},{\"x\":138,\"y\":153},{\"x\":137,\"y\":153},{\"x\":137,\"y\":153},{\"x\":137,\"y\":153},{\"x\":137,\"y\":153},{\"x\":136,\"y\":153},{\"x\":136,\"y\":153},{\"x\":136,\"y\":153},{\"x\":136,\"y\":153},{\"x\":135,\"y\":154},{\"x\":135,\"y\":154},{\"x\":135,\"y\":154},{\"x\":135,\"y\":154},{\"x\":134,\"y\":155},{\"x\":134,\"y\":155},{\"x\":134,\"y\":155},{\"x\":134,\"y\":155},{\"x\":134,\"y\":156},{\"x\":134,\"y\":156},{\"x\":133,\"y\":156},{\"x\":133,\"y\":156},{\"x\":133,\"y\":157},{\"x\":133,\"y\":157},{\"x\":132,\"y\":157},{\"x\":132,\"y\":157},{\"x\":132,\"y\":158},{\"x\":132,\"y\":158},{\"x\":132,\"y\":158},{\"x\":132,\"y\":158},{\"x\":132,\"y\":159},{\"x\":132,\"y\":159},{\"x\":131,\"y\":159},{\"x\":131,\"y\":159},{\"x\":131,\"y\":160},{\"x\":131,\"y\":160},{\"x\":131,\"y\":161},{\"x\":131,\"y\":161},{\"x\":131,\"y\":161},{\"x\":131,\"y\":161},{\"x\":130,\"y\":162},{\"x\":130,\"y\":162},{\"x\":130,\"y\":162},{\"x\":130,\"y\":162},{\"x\":130,\"y\":163},{\"x\":130,\"y\":163},{\"x\":130,\"y\":163},{\"x\":130,\"y\":163},{\"x\":130,\"y\":164},{\"x\":130,\"y\":164},{\"x\":130,\"y\":164},{\"x\":130,\"y\":164},{\"x\":130,\"y\":165},{\"x\":130,\"y\":165},{\"x\":130,\"y\":165},{\"x\":130,\"y\":165},{\"x\":130,\"y\":166},{\"x\":130,\"y\":166},{\"x\":130,\"y\":166},{\"x\":130,\"y\":166},{\"x\":130,\"y\":167},{\"x\":130,\"y\":167},{\"x\":130,\"y\":167},{\"x\":130,\"y\":167},{\"x\":130,\"y\":168},{\"x\":130,\"y\":168},{\"x\":130,\"y\":168},{\"x\":130,\"y\":168},{\"x\":130,\"y\":169},{\"x\":130,\"y\":169},{\"x\":130,\"y\":169},{\"x\":130,\"y\":169},{\"x\":130,\"y\":170},{\"x\":130,\"y\":170},{\"x\":130,\"y\":170},{\"x\":130,\"y\":170},{\"x\":130,\"y\":171},{\"x\":130,\"y\":171},{\"x\":130,\"y\":171},{\"x\":130,\"y\":171},{\"x\":130,\"y\":172},{\"x\":130,\"y\":172},{\"x\":131,\"y\":172},{\"x\":131,\"y\":172},{\"x\":130,\"y\":173},{\"x\":130,\"y\":173},{\"x\":131,\"y\":173},{\"x\":131,\"y\":173},{\"x\":131,\"y\":174},{\"x\":131,\"y\":174},{\"x\":132,\"y\":174},{\"x\":132,\"y\":174},{\"x\":132,\"y\":175},{\"x\":132,\"y\":175},{\"x\":132,\"y\":176},{\"x\":132,\"y\":176},{\"x\":132,\"y\":176},{\"x\":132,\"y\":176},{\"x\":132,\"y\":177},{\"x\":132,\"y\":177},{\"x\":133,\"y\":177},{\"x\":133,\"y\":177},{\"x\":133,\"y\":178},{\"x\":133,\"y\":178},{\"x\":133,\"y\":178},{\"x\":133,\"y\":178},{\"x\":133,\"y\":178},{\"x\":133,\"y\":178},{\"x\":134,\"y\":178},{\"x\":134,\"y\":178},{\"x\":134,\"y\":178},{\"x\":134,\"y\":178},{\"x\":135,\"y\":179},{\"x\":135,\"y\":179},{\"x\":135,\"y\":179},{\"x\":135,\"y\":179},{\"x\":136,\"y\":179},{\"x\":136,\"y\":179},{\"x\":136,\"y\":180},{\"x\":136,\"y\":180},{\"x\":137,\"y\":180},{\"x\":137,\"y\":180},{\"x\":137,\"y\":180},{\"x\":137,\"y\":180},{\"x\":138,\"y\":180},{\"x\":138,\"y\":180},{\"x\":138,\"y\":180},{\"x\":138,\"y\":180},{\"x\":139,\"y\":180},{\"x\":139,\"y\":180},{\"x\":139,\"y\":180},{\"x\":139,\"y\":180},{\"x\":140,\"y\":180},{\"x\":140,\"y\":180},{\"x\":140,\"y\":180},{\"x\":140,\"y\":180},{\"x\":141,\"y\":180},{\"x\":141,\"y\":180},{\"x\":141,\"y\":180},{\"x\":141,\"y\":180},{\"x\":142,\"y\":181},{\"x\":142,\"y\":181},{\"x\":142,\"y\":181},{\"x\":142,\"y\":181},{\"x\":143,\"y\":181},{\"x\":143,\"y\":181},{\"x\":143,\"y\":181},{\"x\":143,\"y\":181},{\"x\":144,\"y\":181},{\"x\":144,\"y\":181},{\"x\":144,\"y\":181},{\"x\":144,\"y\":181},{\"x\":145,\"y\":181},{\"x\":145,\"y\":181},{\"x\":145,\"y\":181},{\"x\":145,\"y\":181},{\"x\":146,\"y\":181},{\"x\":146,\"y\":181},{\"x\":146,\"y\":181},{\"x\":146,\"y\":181},{\"x\":147,\"y\":181},{\"x\":147,\"y\":181},{\"x\":147,\"y\":180},{\"x\":147,\"y\":180},{\"x\":148,\"y\":180},{\"x\":148,\"y\":180},{\"x\":148,\"y\":179},{\"x\":148,\"y\":179},{\"x\":149,\"y\":179},{\"x\":149,\"y\":179},{\"x\":149,\"y\":179},{\"x\":149,\"y\":179},{\"x\":150,\"y\":179},{\"x\":150,\"y\":179},{\"x\":150,\"y\":179},{\"x\":150,\"y\":179},{\"x\":151,\"y\":179},{\"x\":151,\"y\":179},{\"x\":152,\"y\":178},{\"x\":152,\"y\":178},{\"x\":153,\"y\":178},{\"x\":153,\"y\":178},{\"x\":153,\"y\":178},{\"x\":153,\"y\":178},{\"x\":154,\"y\":178},{\"x\":154,\"y\":178},{\"x\":154,\"y\":177},{\"x\":154,\"y\":177},{\"x\":154,\"y\":177},{\"x\":154,\"y\":177},{\"x\":155,\"y\":176},{\"x\":155,\"y\":176},{\"x\":155,\"y\":176},{\"x\":155,\"y\":176},{\"x\":156,\"y\":175},{\"x\":156,\"y\":175},{\"x\":156,\"y\":174},{\"x\":156,\"y\":174},{\"x\":157,\"y\":174},{\"x\":157,\"y\":174},{\"x\":157,\"y\":174},{\"x\":157,\"y\":174},{\"x\":157,\"y\":173},{\"x\":157,\"y\":173},{\"x\":158,\"y\":173},{\"x\":158,\"y\":173},{\"x\":158,\"y\":172},{\"x\":158,\"y\":172},{\"x\":159,\"y\":172},{\"x\":159,\"y\":172},{\"x\":159,\"y\":171},{\"x\":159,\"y\":171},{\"x\":159,\"y\":171},{\"x\":159,\"y\":171},{\"x\":159,\"y\":170},{\"x\":159,\"y\":170},{\"x\":159,\"y\":170},{\"x\":159,\"y\":170},{\"x\":159,\"y\":169},{\"x\":159,\"y\":169},{\"x\":159,\"y\":169},{\"x\":159,\"y\":169},{\"x\":159,\"y\":168},{\"x\":159,\"y\":168},{\"x\":160,\"y\":168},{\"x\":160,\"y\":168},{\"x\":160,\"y\":167},{\"x\":160,\"y\":167},{\"x\":160,\"y\":167},{\"x\":160,\"y\":167},{\"x\":160,\"y\":166},{\"x\":160,\"y\":166},{\"x\":160,\"y\":166},{\"x\":160,\"y\":166},{\"x\":161,\"y\":165},{\"x\":161,\"y\":165},{\"x\":161,\"y\":165},{\"x\":161,\"y\":165},{\"x\":161,\"y\":164},{\"x\":161,\"y\":164},{\"x\":161,\"y\":164},{\"x\":161,\"y\":164},{\"x\":161,\"y\":163},{\"x\":161,\"y\":163},{\"x\":161,\"y\":163},{\"x\":161,\"y\":163},{\"x\":161,\"y\":162},{\"x\":161,\"y\":162},{\"x\":161,\"y\":162},{\"x\":161,\"y\":162},{\"x\":161,\"y\":161},{\"x\":161,\"y\":161},{\"x\":161,\"y\":161},{\"x\":161,\"y\":161},{\"x\":161,\"y\":160},{\"x\":161,\"y\":160},{\"x\":161,\"y\":159},{\"x\":161,\"y\":159},{\"x\":161,\"y\":159},{\"x\":161,\"y\":159},{\"x\":161,\"y\":158},{\"x\":161,\"y\":158},{\"x\":161,\"y\":158},{\"x\":161,\"y\":158},{\"x\":161,\"y\":157},{\"x\":161,\"y\":157},{\"x\":161,\"y\":157},{\"x\":161,\"y\":157},{\"x\":161,\"y\":156},{\"x\":161,\"y\":156},{\"x\":161,\"y\":156},{\"x\":161,\"y\":156},{\"x\":161,\"y\":155},{\"x\":161,\"y\":155},{\"x\":161,\"y\":155},{\"x\":161,\"y\":155},{\"x\":161,\"y\":154},{\"x\":161,\"y\":154},{\"x\":161,\"y\":154},{\"x\":161,\"y\":154},{\"x\":161,\"y\":153},{\"x\":161,\"y\":153},{\"x\":160,\"y\":153},{\"x\":160,\"y\":153},{\"x\":160,\"y\":153},{\"x\":160,\"y\":153},{\"x\":159,\"y\":153},{\"x\":159,\"y\":153},{\"x\":159,\"y\":153},{\"x\":159,\"y\":153},{\"x\":158,\"y\":153},{\"x\":158,\"y\":153},{\"x\":158,\"y\":153},{\"x\":158,\"y\":153},{\"x\":157,\"y\":153},{\"x\":157,\"y\":153},{\"x\":157,\"y\":153},{\"x\":157,\"y\":153},{\"x\":156,\"y\":153},{\"x\":156,\"y\":153},{\"x\":156,\"y\":153},{\"x\":156,\"y\":153},{\"x\":155,\"y\":152},{\"x\":155,\"y\":152},{\"x\":155,\"y\":152},{\"x\":155,\"y\":152},{\"x\":154,\"y\":152},{\"x\":154,\"y\":152},{\"x\":154,\"y\":152},{\"x\":154,\"y\":152},{\"x\":153,\"y\":152},{\"x\":153,\"y\":152},{\"x\":153,\"y\":151},{\"x\":153,\"y\":151},{\"x\":152,\"y\":151},{\"x\":152,\"y\":151},{\"x\":152,\"y\":152},{\"x\":152,\"y\":152},{\"x\":151,\"y\":152},{\"x\":151,\"y\":152},{\"x\":150,\"y\":152},{\"x\":150,\"y\":152},{\"x\":150,\"y\":151},{\"x\":150,\"y\":151},{\"x\":150,\"y\":151},{\"x\":150,\"y\":151},{\"x\":149,\"y\":152},{\"x\":149,\"y\":152},{\"x\":149,\"y\":152},{\"x\":149,\"y\":152},{\"x\":148,\"y\":152},{\"x\":148,\"y\":152},{\"x\":148,\"y\":151},{\"x\":148,\"y\":151},{\"x\":147,\"y\":151},{\"x\":147,\"y\":151},{\"x\":147,\"y\":151},{\"x\":147,\"y\":151},{\"x\":146,\"y\":151},{\"x\":146,\"y\":151},{\"x\":146,\"y\":151},{\"x\":146,\"y\":151},{\"x\":145,\"y\":151},{\"x\":145,\"y\":151},{\"x\":145,\"y\":151},{\"x\":145,\"y\":151}]}],\"circles\":[{\"pore\":[{\"x\":224,\"y\":188,\"r\":2},{\"x\":143,\"y\":178,\"r\":1},{\"x\":141,\"y\":176,\"r\":2},{\"x\":139,\"y\":174,\"r\":1},{\"x\":136,\"y\":171,\"r\":2},{\"x\":150,\"y\":165,\"r\":1},{\"x\":144,\"y\":164,\"r\":1},{\"x\":156,\"y\":162,\"r\":1},{\"x\":150,\"y\":161,\"r\":1},{\"x\":146,\"y\":161,\"r\":2},{\"x\":153,\"y\":159,\"r\":1},{\"x\":146,\"y\":157,\"r\":1},{\"x\":144,\"y\":155,\"r\":1}]}],\"blackhead_num\":0,\"pore_num\":13,\"blackhead_segs_type\":[],\"pore_segs_type\":[1,1]},\"skinface\":{\"skin_health_check_images\":{\"src_pic\":\"\"}}}]}}";
    //画布
    var canvas = document.getElementById('mycanvas');
    //画笔
    var ctx = canvas.getContext('2d');
    var img = new Image();
    //图片 也可以是图片的BASE64 记得加头部信息 eg:......
    img.src = 'http://192.168.8.88:9000/cms/doudou.jpg';
    var jsonData = JSON.parse(data);
    //皱纹
    var wrinkle_data = jsonData.result.face_list[0].wrinkle.wrinkle_data;
    //左右黑眼圈对象
    var dark_circle_left = jsonData.result.face_list[0].eyesattr.dark_circle_left;
    var dark_circle_right = jsonData.result.face_list[0].eyesattr.dark_circle_right;
    //左右眼袋对象
    var eye_bags_left = jsonData.result.face_list[0].eyesattr.eye_bags_left;
    var eye_bags_right = jsonData.result.face_list[0].eyesattr.eye_bags_right;
    //痘信息
    var acne_list = jsonData.result.face_list[0].acnespotmole.acne_list;
    //斑信息
    var speckle_list = jsonData.result.face_list[0].acnespotmole.speckle_list;
    //痣信息
    var mole_list = jsonData.result.face_list[0].acnespotmole.mole_list;
    img.onload = function () {
        //图片画到canvas
        ctx.drawImage(this, 0, 0);
        //皱纹
        for (var i = 0; i < wrinkle_data.length; i++) {
            for (var j = 0; j < wrinkle_data[i].length; j++) {
                var wrinkleDataBeans = wrinkle_data[i];
                var k = j + 1;
                if(k<wrinkleDataBeans.length){
                    //线条起始坐标
                    var x1 = Number(wrinkleDataBeans[j].x);
                    var y1 = Number(wrinkleDataBeans[j].y);
                    //线条结束坐标
                    var x2 = Number(wrinkleDataBeans[k].x);
                    var y2 = Number(wrinkleDataBeans[k].y);
                    ctx.strokeStyle = 'rgb(75,0,130)';
                    //线条粗细程度
                    ctx.lineWidth = 3;
                    ctx.beginPath();
                    ctx.moveTo(x1,y2);
                    ctx.lineTo(x2,y1);
                    ctx.stroke();
                }
            }
        }
        //左黑眼圈
        for (var i = 0; i < dark_circle_left.length; i++) {
            for (var j = 0; j < dark_circle_left[i].length; j++) {
                var darkCircleLeftBeans = dark_circle_left[i];
                var k = j + 1;
                if(k<darkCircleLeftBeans.length){
                    var x1 = Number(darkCircleLeftBeans[j].x);
                    var y1 = Number(darkCircleLeftBeans[j].y);
                    var x2 = Number(darkCircleLeftBeans[k].x);
                    var y2 = Number(darkCircleLeftBeans[k].y);
                    ctx.strokeStyle = 'rgb(0,206,209)';
                    ctx.lineWidth = 3;
                    ctx.beginPath();
                    ctx.moveTo(x1,y2);
                    ctx.lineTo(x2,y1);
                    ctx.stroke();
                }
            }
        }
        //右黑眼圈
        for (var i = 0; i < dark_circle_right.length; i++) {
            for (var j = 0; j < dark_circle_right[i].length; j++) {
                var darkCircleRightBeans = dark_circle_right[i];
                var k = j + 1;
                if(k<darkCircleRightBeans.length){
                    var x1 = Number(darkCircleRightBeans[j].x);
                    var y1 = Number(darkCircleRightBeans[j].y);
                    var x2 = Number(darkCircleRightBeans[k].x);
                    var y2 = Number(darkCircleRightBeans[k].y);
                    ctx.strokeStyle = 'rgb(0,206,209)';
                    ctx.lineWidth = 3;
                    ctx.beginPath();
                    ctx.moveTo(x1,y2);
                    ctx.lineTo(x2,y1);
                    ctx.stroke();
                }
            }
        }
        //左眼袋
        for (var i = 0; i < eye_bags_right.length; i++) {
            for (var j = 0; j < eye_bags_right[i].length; j++) {
                var eyeBagsRightBeans = eye_bags_right[i];
                var k = j + 1;
                if(k<eyeBagsRightBeans.length){
                    var x1 = Number(eyeBagsRightBeans[j].x);
                    var y1 = Number(eyeBagsRightBeans[j].y);
                    var x2 = Number(eyeBagsRightBeans[k].x);
                    var y2 = Number(eyeBagsRightBeans[k].y);
                    ctx.strokeStyle = 'rgb(255,69,0)';
                    ctx.lineWidth = 3;
                    ctx.beginPath();
                    ctx.moveTo(x1,y2);
                    ctx.lineTo(x2,y1);
                    ctx.stroke();
                }
            }
        }
        //右眼袋
        for (var i = 0; i < eye_bags_left.length; i++) {
            for (var j = 0; j < eye_bags_left[i].length; j++) {
                var eyeBagsLeftBeans = eye_bags_left[i];
                var k = j + 1;
                if(k<eyeBagsLeftBeans.length){
                    var x1 = Number(eyeBagsLeftBeans[j].x);
                    var y1 = Number(eyeBagsLeftBeans[j].y);
                    var x2 = Number(eyeBagsLeftBeans[k].x);
                    var y2 = Number(eyeBagsLeftBeans[k].y);
                    ctx.strokeStyle = 'rgb(0,206,209)';
                    ctx.lineWidth = 3;
                    ctx.beginPath();
                    ctx.moveTo(x1,y2);
                    ctx.lineTo(x2,y1);
                    ctx.stroke();
                }
            }
        }
        //痘信息
        for (var i = 0; i < acne_list.length; i++) {
            var x = Number(acne_list[i].left);
            var y = Number(acne_list[i].top);
            var width = Number(acne_list[i].right) - x;
            var height = Number(acne_list[i].bottom) - y;
            ctx.strokeStyle = 'rgb(0, 129, 255)';
            ctx.strokeRect(x, y, width, height)
        }
        //斑信息
        for (var i = 0; i < speckle_list.length; i++) {
            var x = Number(speckle_list[i].left);
            var y = Number(speckle_list[i].top);
            var width = Number(speckle_list[i].right) - x;
            var height = Number(speckle_list[i].bottom) - y;
            ctx.strokeStyle = 'rgb(57, 181, 74)';
            ctx.strokeRect(x, y, width, height)
        }
        //痣信息
        for (var i = 0; i < mole_list.length; i++) {
            var x = Number(mole_list[i].left);
            var y = Number(mole_list[i].top);
            var width = Number(mole_list[i].right) - x;
            var height = Number(mole_list[i].bottom) - y;
            ctx.strokeStyle = 'rgb(229, 77, 66)';
            ctx.strokeRect(x, y, width, height)
        }
    }

</script>

</body>
</html>
